<template>
  <div class="details-footer-guide" ref="footer">
    <div class="footer-left" @click="collectionFun(collection)">
      <svg class="icon" aria-hidden="true" ref="collectIcon" :class="{'red': collectFlag}">
        <use xlink:href="#icon-shoucang"></use>
      </svg>
      <span>收藏</span>
    </div>
    <div class="footer-right">
      <div @click="getRental">立即租用</div>
    </div>
    <van-popup class="popup" v-model="showPop" position="right" closeable>
      <vehicle-rental ref="vehicleRental" :rentalData="rentalData" />
    </van-popup>
  </div>
</template>
<script>
import { getCollectionList, getDeleteCollection, getInsertCollection, getOrderList } from '../../../api';
import VehicleRental from './VehicleRental.vue';
export default {
  components: { VehicleRental },
  name: 'detailsFooterGuide',
  props: {
    collection: Object
  },
  data() {
    return {
      collectFlag: false, // 是否已经收藏的标记
      showPop: false, // 租车时间套餐弹框
      rentalData: null
    }
  },
  mounted() {
    this.getWidth();
    this.getCollectMsg();
  },
  methods: {
    // 立即租用
    getRental() {
      // 1 先查看有没有订单，然后再查看车辆能不能租
      getOrderList(this.$cookie.get('userId'), 0).then(({data}) => {
        if(data.data.length === 0) { // 没有订单
          if(this.collection.rentalStatus === '1') { // 当前车辆可以被租用
            this.$dialog.confirm({ // 弹框确认是否进入订单页面
              message: '当前没有订单，确定要租用当前车辆吗？'
            }).then(() => {
              this.showPop = true; // 显示时间套餐弹框
              this.rentalData = this.collection; // 将数据传递给子组件
              this.$nextTick(() => { // 调用子组件的方法
                this.$refs.vehicleRental.init(this.rentalData.rentalPrice);
              })
            }).catch(() => {
              this.showPop = false;
              return false;
            })
          }else {
            this.$dialog.alert({
              message: '当前车辆已经被占用'
            }).then(() => {})
          }
        }else {
          this.$dialog.confirm({ // 弹框确认是否进入订单页面
            message: '当前有正在进行中的订单，是否进入订单界面？'
          }).then(() => {
            this.$router.push('/rental');
          }).catch(() => {
            return false;
          })
        }
      })
    },
    // 点击确认收藏与取消收藏
    collectionFun(e) {
      this.collectFlag = !this.collectFlag;
      if(this.collectFlag) {
        getInsertCollection(this.$cookie.get('userId'), e.id).then(res => {
        })
      }else {
        getDeleteCollection(this.$cookie.get('userId'), e.id).then(res => {
        })
      }
    },
    // 一进入页面后显示是否已经被收藏
    getCollectMsg() {
      getCollectionList(this.$cookie.get('userId'), this.$route.query.id).then(res => {
        if(res.data.data.length === 0) {
          this.collectFlag = false;
        }else {
          this.collectFlag = true;
        }
      })
    },
    getWidth() {
      this.$refs.footer.style.width =
        document.documentElement.clientWidth + "px";
    }
  }
}
</script>
<style lang="scss" scoped>
.details-footer-guide {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 0px;
  height: $height*2;
  background-color: #fff;
  display: flex;
  justify-content: center;
  border-top: 1px solid #ccc;
  z-index: 100;
  .footer-left {
    width: 30%;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    svg {
      font-size: 30px;
    }
    span {
      font-size: 12px;
    }
  }
  .footer-right {
    width: 70%;
    div {
      width: 80%;
      margin: 0 auto;
      background-color: $color;
      color: #fff;
      border-radius: 100px;
      text-align: center;
      height: $height*1.5;
      line-height: $height*1.5;
      margin-top: 10px;
    }
  }
}
.red {
  color: orange;
}
</style>